<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
	<pre>
	<!-- 如果想创建组件，需要使用Vue.component
	这个方法
	接收到的参数：
	第一个参数是：组建的名称
	第二个参数是：一个对象(里面包含的内容是data函数[return 的是数值]，还有template页面模板结构，如果有方法可以加上methods方法)
	-->
		<!-- data必须是一个函数，由于用到闭包函数 -->
		<!-- 注意事项：模板必须有根元素包裹，且有且只有一个 -->
	</pre>
	<div id="app">
		<hello-world></hello-world>
    </div>

	
    <script>
	Vue.component('hello-world',{
		data:function(){
			return {
				name:'张山',
				age:14
			}
		},
		template:`
			<div>
				<button @click='handle'>按钮</button>
				<p>{{name}}</p>
				<p>{{age}}</p>
			</div>
		`,
		methods:{
			handle:function(){
				this.age++;
			}
		}
	})
        var vm = new Vue({
            el: '#app'
            ,data: {
				arr:['first' ,'second', 'third'],
				obj:{
					name:'张山',
					info:'学生'
				}
			}
			
        })
		<!-- vm.arr[0]='one' -->
		<!-- 不能对数组进行修改 -->
		<!-- 第一个参数：只需要修改的数据 -->
		<!-- 第二个参数：指需要修改数据的索引 -->
		<!-- 第三个参数：修改之后的值 -->
		<!-- 动态修改 1.-->
		vm.$set(vm.arr,0,'one')
		Vue.set(vm.arr,1,'two')
		<!-- 修改成功 -->
		vm.$set(vm.obj,'name','Tom')
		
	</script>
</body>

</html>